<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>商城</title>
    <!-- Import style -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <link
      rel="stylesheet"
      href="./static/element-plus/theme-chalk/display.css"
    />
    <!-- Import Vue 3 -->
    <script src="./static/js/vue.global.js"></script>
    <!-- Import component library -->
    <script src="./static/element-plus/index.full.js"></script>
  </head>

  <body>
    <div id="app">
        <el-container>
        <el-header>
            <el-row>
              <el-col :span="4" style="display: flex;flex-direction:row;align-items:center">
                <img src="./static/images/logo.png" style="height: 60px;">
                <h2 style="padding-left: 8px;">技术社区</h2>
              </el-col>
              <el-col :span="8">
                <el-menu :default-active="activeIndex" mode="horizontal" style="border-bottom: none  !important"
                  :ellipsis="false">
                  <el-menu-item index="1">首页</el-menu-item>
                  <el-menu-item index="2">文章</el-menu-item>
                  <el-menu-item index="3">课程</el-menu-item>
                  <el-menu-item index="4">商城</el-menu-item>
                </el-menu>
              </el-col>
              <el-col :span="8" style="height: 60px; line-height:60px" class="hidden-xs-only">
                <el-input />
              </el-col>
              <el-col :span="4" style="line-height: 60px;" class="hidden-xs-only">
    
                <div v-if="!isLoggedIn">
                  <el-link type="primary" @click="isLoggedIn=!isLoggedIn">登录</el-link>
                  <el-link type="primary" style="padding: 8px;" @click="goToRegister()">注册</el-link>
                </div>
                <div v-else>
                  <el-link @click="goToProfile">
                    <img src="./static/images/avatar.png"
                      style="height: 30px; vertical-align: middle; margin-right: 5px;">{{username}}
                  </el-link>
                </div>
              </el-col>
            </el-row>
          </el-header>
        <el-container>

          
            <el-container>
                <el-main>
                  <el-row>
                    <el-col :sm="8" :xs="12" v-for="(product,i) in productList" :key="i">
                      <el-card>
                        <img :src="product.img" width="300px" height="300px"/>
                        <p>{{product.name}}</p>
                        <p>价格: {{product.price}} 库存: {{product.stock}}</p>
                        <el-button @click="addToCard(product)">加入购物车</el-button>
                      </el-card>
                    </el-col>
                  </el-row>
                </el-main>
                <el-aside>
                  <el-card>
                    <h2>购物车</h2>
                    <div v-if="cartItems.length">
                      <div v-for="(item,i) in cartItems" :key="i">
                        <img :src="item.img" width="200px" height="200px"/>
                        <p>{{item.name}}</p>
                        <p>单价: {{item.price}}</p>
                        <el-input-number   
                            v-model="item.number" 
                            :min="0" 
                            :max="item.stock"
                            @change="handleChange(item)"
                        ></el-input-number>
                        <el-divider style="margin: 10px 0;"></el-divider>
                        <p>总价: {{totalPrice}}</p>
                        <el-button>结算</el-button>
                      </div>
                    </div>
                    <div v-else>
                      <el-empty description="暂无商品"></el-empty>
                    </div>
                  </el-card>
                </el-aside>
              </el-container>
              <el-footer>
                <el-row>
                  <el-col :lg="8":xs="24" style="display: flex;flex-direction:row;align-items:center;">
                    <div><img src="./static/images/logo.png" style="width: 100px;"></div>
                    <div style="padding-left: 8px;">
                      <h2>技术社区</h2>
                      <p>致力于构建一个专业的IT技术交流社区</p>
                    </div>
                  </el-col>
                  <el-col :lg="8":xs="24">
                    <div>
                      <el-link type="primary">首页</el-link>
                      <el-link type="primary">文章</el-link>
                      <el-link type="primary">课程</el-link>
                      <el-link type="primary">商城</el-link>
                    </div>
                    <div>
                      <el-link type="primary">关于我们</el-link>
                      <el-link type="primary">使用手册</el-link>
                      <el-link type="primary">隐私条款</el-link>
                      <el-link type="primary">建议反馈</el-link>
                    </div>
                  </el-col>
                  <el-col :lg="8":xs="24">
                    <h2>联系我们</h2>
                    <p>电话：1111111</p>
                    <p>邮箱：111@dev.com</p>
                  </el-col>
                </el-row>
                <div style="background-color: #a0cfff;text-align:center;height: 60px;line-height: 60px;">软件开发工作室版权所有</div>
              </el-footer>
              </el-container>
    </div>
  </body>
  <script>
    var App = {
      data() {
        return {
          name: "hello vue",
          activeIndex: "1",
             // 商品列表
             productList: [
                    { id:'1',type: '徽章', name: 'IT社区文创 ：「代码新秀闪耀」 荣誉徽章', price: 29, stock: 30, img: './static/images/product01.png' },
                    { id:'2',type: '帆布包', name: '【it社区文创】「极简主义」帆布包', price: 79, stock: 60, img: './static/images/product02.png' },
                    { id:'3',type: 'T恤', name: '蓝字魔法，解锁IT新风尚——百搭T恤衫', price: 12, stock: 100, img: './static/images/product03.png' },
                    { id:'4',type: 'U盘', name: 'IT达人必备：128GB紫色技术社区U盘', price: 39, stock: 80, img: './static/images/product04.png' },
                    { id:'5',type: '笔记本', name: '高端皮质IT笔记本，简约设计尽显专业气质', price: 29, stock: 30, img: './static/images/product05.png' },
                    { id:'6',type: '鼠标垫', name: '文创字母鼠标垫「IT技术社区专属」', price: 79, stock: 60, img: './static/images/product06.png' },
                    { id:'7',type: '马克杯', name: '白色陶瓷杯，简约IT标志，时尚办公新选择', price: 12, stock: 100, img: './static/images/product07.png' },
                    { id:'8',type: '贴纸', name: '科技与创意碰撞——IT社区蓝色徽章文创', price: 39, stock: 80, img: './static/images/product08.png' },
            ],
            cartItems: [],
        };
      },
      methods:{
        //把商品加入购物车
        addToCard(product){
            const cartItem = this.cartItems.find((item) => {
                item.id === product.id;
            });
            if(cartItem){
                cartItem.number++;
            }else{
                this.cartItems.push({ ...product, number: 1 });
            }
            this.calcPrice()
        },
        //删除商品
        removeFromCart(item){
            const index = this.cartItems.indexOf(item);
            if(index >= -1){
                this.cartItems.splice(index, 1);
            }
        },

        //改变数量触发事件
        handleChange(item){
            if(item.number <= 0){
                this.removeFromCart(item);
            }
            this.calcPrice()
        },

        // //计算总价
        // calcPrice() {
        //     this.totalPrice = this.cartItems.reduce((total, item) => {
        //         return total + item.price * item.number;
        //     },0);
        // }
      },
      computed:{
          //计算总价
          totalPrice() {
              return this.cartItems.reduce((total, item) => {
                return total + item.price * item.number;
            },0);
        }
        }
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
  </script>
</html>    